<template>
  <div>
    <div class="box box-ver w-p100 h-p100">
      <index-content :actTabIndex="actTabIndex"></index-content>
      <index-tab :actTabIndex="actTabIndex" @changeTab="changeTab"></index-tab>
      <transition :name="routerAni">
        <router-view class="router-view"></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
import indexContent from '@/components/indexContent'
import indexTab from '@/components/indexTab'
import { mapState } from 'vuex'
export default {
  name: 'index',
  components: {
    indexContent,
    indexTab
  },
  computed: mapState(['userInfo', 'routerAni']),
  data () {
    return {
      actTabIndex: 0
    }
  },
  mounted () {
  },
  methods: {
    changeTab (index) {
      if (index === 0) {
        this.actTabIndex = index
      } else {
        if (this.userInfo._id) {
          this.actTabIndex = index
        } else {
          this.$router.replace('/login')
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.router-view{
  z-index:1;
}
</style>
